<template>
  <div id="IntegralRecord">
    <el-button
      style="margin: 10px 0 10px"
      type="info" size="small" plain
      @click="addCreditVis = true"
    >
      <i class="el-icon-plus"></i>添加积分
    </el-button>

    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        label="积分"
      >
        <template slot-scope="scope">
          {{scope.row | handleCredit}}
        </template>
      </el-table-column>
      <!--<el-table-column-->
        <!--label="商品名称"-->
      <!--&gt;-->
      <!--</el-table-column>-->
      <el-table-column
        prop="operateDesc"
        label="获取途径"
      >
      </el-table-column>
      <el-table-column
        prop="operateTime"
        label="时间"
      >
      </el-table-column>
    </el-table>

    <el-pagination
      layout="prev, pager, next"
      :page-count="pageInfo.pageCount"
      :page-size="pageInfo.pageSize"
      :current-page="pageInfo.currentPage"
      @current-change="loadTableData($event)"
    >
    </el-pagination>

    <el-dialog
      title="提示"
      :visible.sync="addCreditVis"
    >
      <!--:before-close="handleClose"-->
      <el-form :model="addCreditForm" :rules="addCreditFormRules" ref="addCreditForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="积分" prop="totalValue">
          <el-input v-model.number="addCreditForm.totalValue"></el-input>
        </el-form-item>
        <el-form-item label="积分类型" prop="creditType">
          <el-select v-model="addCreditForm.creditType" placeholder="请选择积分类型">
            <el-option label="消费积分" value="0"></el-option>
            <el-option label="分销积分" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="来源途径" prop="getWay">
          <el-input v-model="addCreditForm.getWay"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="() => { addCreditVis = false; resetAddCreditForm() }">取 消</el-button>
        <el-button
          type="primary" :loading="addCredicDiaOkLoading"
          @click="addCredicDiaOk('addCreditForm')"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import API from '@/config/api.js'
import ErrorConfig from '@/config/error.config.js'
export default {
  name: 'IntegralRecord',
  props: ['tabConfig'],
  mounted () {
    this.$nextTick(() => {
      this.initPage()
    })
  },
  components: {},
  data () {
    const validateTotalValue = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入积分'))
      }
      const regPositiveInteger = /^[0-9]*[1-9][0-9]*$/
      if (!regPositiveInteger.test(value)) {
        callback(new Error('请输入正整数'))
      }
      callback()
    }
    return {
      tableData: null,
      pageInfo: {
        pageCount: 1,
        pageSize: 0,
        currentPage: 1
      },
      addCreditFormRules: {
        totalValue: [
          { validator: validateTotalValue, required: true, trigger: 'blur' }
        ],
        creditType: [
          { required: true, message: '请选择积分类型', trigger: 'change' }
        ],
        getWay: [
          { required: true, message: '请输入来源途径', trigger: 'blur' }
        ]
      },
      addCreditForm: {
        accountId: this.$route.params.id,
        totalValue: '',
        creditType: '',
        getWay: ''
      },
      addCreditVis: false,
      addCredicDiaOkLoading: false
    }
  },
  watch: {},
  filters: {
    handleCredit (row) {
      const { creditValue, operateType } = row
      if (operateType === 0) { // 增加
        return `+${creditValue}点`
      }
      if (operateType === 1) { // 减少
        return `-${creditValue}点`
      }
    }
  },
  methods: {
    initPage () {
      this.loadTableData()
    },
    async loadTableData (page = 1) { // 加载数据
      this.tabConfig.loading = true
      const { id } = this.$route.params
      const response = await API.getIntegralRecord({ accountId: id, page })
      this.tabConfig.loading = false
      const { code, data } = response
      if (code === 1) {
        const { pageCount, pageIndex, pageSize, rows } = data
        this.tableData = rows
        this.pageInfo.pageCount = pageCount || 1
        this.pageInfo.pageSize = pageSize
        this.pageInfo.currentPage = pageIndex
      } else {
        if (code === -1) {
          const { msg } = response
          this.$message.error(msg)
        } else {
          this.$message.error(ErrorConfig[code])
        }
      }
    },
    resetAddCreditForm (formName = 'addCreditForm') {
      this.$refs[formName].resetFields()
    },
    addCredicDiaOk (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.addCredicDiaOkLoading = true
          const response = await API.createCredit(this.addCreditForm)
          this.addCredicDiaOkLoading = false
          const { code } = response
          if (code === 1) {
            this.addCreditVis = false
            this.$message({
              type: 'success',
              message: '添加成功'
            })
            this.loadTableData(this.pageInfo.currentPage)
            this.resetAddCreditForm()
          } else {
            if (code === -1) {
              const { msg } = response
              this.$message.error(msg)
            } else {
              this.$message.error(ErrorConfig[code])
            }
            return false
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .el-pagination {
    margin-top: 20px;
    text-align: center;
  }
</style>
